(function () {
  const oContainer = document.querySelector('.carousel')
  const oImgBox = oContainer.querySelector('.imgs')
  const oPrev = oContainer.querySelector('.prev')
  const oNext = oContainer.querySelector('.next')
  const aImgs = oContainer.querySelectorAll('.imgs-wrap')
  const moveTimes = aImgs.length - 3 // 能翻页的次数
  let currTime = 0


  changeBtn()
  oPrev.onclick = oNext.onclick = function () {
    if (this == oPrev) {
      if (currTime > 0) {
        currTime--
        changeImg()
      }
    } else {
      if (currTime < moveTimes) {
        currTime++
        changeImg()
      }
    }
  }

  function changeImg() {
    oImgBox.style.left = -((aImgs[0].offsetWidth + 30) * currTime) + 'px'
    changeBtn()
  }

  function changeBtn() {
    if (currTime <= 0) {
      oPrev.classList.add('invalid')
    } else {
      oPrev.classList.remove('invalid')
    }

    if (currTime >= moveTimes) {
      oNext.classList.add('invalid')
    } else {
      oNext.classList.remove('invalid')
    }

  }
  let timer
  function go() {
    timer = setInterval(() => {
      if (currTime == moveTimes) {
        currTime = -1
      }
      oNext.onclick()
    }, 2000);
  }
  go()
  oContainer.onmouseover = function () {
    clearInterval(timer)
  }
  oContainer.onmouseout = function () {
    go()
  }


  const articleWrap = document.querySelector('#blog .article-wrap')
  const url = 'http://81.70.162.221:3000/getBlogs'

  axios.get(url).then(function (response) {
    let blogs = response.data.data;
    blogs.forEach(blog => {
      articleWrap.insertAdjacentHTML('beforeend', `
        <article>
        <a href="blog-single.html?id=${blog.id}"><img src="http://81.70.162.221:3000/${blog.image}" alt=""></a>
        <div class="content-wrap">
          <a href="blog-single.html?id=${blog.id}">
            <h3>${blog.title}</h3>
          </a>
          <+p>${blog.abstract} </+p>
          <div class="flex justify-content-between align-items-center">
            <span class="date"><i class="iconfont qm-clock"></i>${blog.createTime}</span>
            <a class="more" href="blog-single.html?id=${blog.id}">查看更多<i class="iconfont qm-arrow-right"></i></a>
          </div>
        </div>
      </article>
    `);
    });
  });
})()

